<template>
  <el-card>
    <div slot="header">
      <div class="uni-card-header uni-flex">
        <span class="uni-title">{{title}}</span>
        <el-select v-model="retain" placeholder="请选择" size="small" >
          <el-option v-for="item in tongjiRetain" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="14" style="border-right: 1px solid #e7e7eb;">
        <!-- <ve-map v-if="chartType === 've-map'" :data="chartData"></ve-map> -->
        <ve-ring :data="chartData"></ve-ring>
      </el-col>
      <el-col :span="10">
        <table cellspacing="0" class="table">
          <thead class="thead">
            <tr>
              <th class="table_cell tr" v-for="item in columns">
                {{item}}
              </th>
              <th class="table_cell tr">
                占比
              </th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="row in list">
              <td class="table_cell" v-for="item in columns">{{row[item]}}</td>
              <td class="table_cell">{{total === 0? '0%' : toFixed(row[columns[1]]*100/total)+'%'}}</td>
            </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      retain: 'active',
      tongjiRetain: [
        {
          label: "新增用户数",
          value: 'newly'
        },
        {
          label: "活跃用户数",
          value: 'active'
        }
      ],
      // <ve-map :data="chartData"></ve-map>
    }
  },
  props: {
    title: {
      type: String,
      default: () => { return "性别分布" }
    },
    chartType: {
      type: String,
      default: () => { return "ve-pie" }
    },
    columns: {
      type: Array,
      default: () => { return ["性别", "用户数"] }
    },
    visitUv: {
      type: Object,
      default: () => { return null }
    },
    visitUvNew: {
      type: Object,
      default: () => { return null }
    }
  },
  created () {

  },
  computed: {
    chartData: {
      get () {
        return {
          columns: this.columns,
          rows: this.retain === 'newly' ? this.rowsNew : this.rows
        }
      }
    },
    total: {
      get () {
        var mapTmp = this.retain === 'newly' ? this.visitUvNew : this.visitUv
        var total = 0
        for(var key in mapTmp||{}) {
          total += mapTmp[key]
        }
        return total;
      }
    },
    list: {
      get () {
        return this.retain === 'newly' ? this.rowsNew : this.rows
      }
    },
    rows: {
      get () {
        if(this.columns.length == 2) {
          var list = []
          var columns = this.columns;
          for(var key in this.visitUv||{}) {
            var map = {};
            map[this.columns[0]] = key
            map[this.columns[1]] = this.visitUv[key]
            list.push(map)
          }
          return list
        }
        return []
      }
    },
    rowsNew: {
      get () {
        if(this.columns.length == 2) {
          var list = []
          var columns = this.columns;
          for(var key in this.visitUvNew||{}) {
            var map = {};
            map[this.columns[0]] = key
            map[this.columns[1]] = this.visitUvNew[key]
            list.push(map)
          }
          return list
        }
        return []
      }
    }
  },
  methods: {
  }
}
</script>
<style type="text/css" scoped="scoped" lang="less">
  .uni-card-header {
    justify-content: space-between;
    align-items: center;
    .uni-title {
      font-weight: 400;
      font-size: 18px;
    }
  }
  .table {
    width: 100%;
    font-size: 14px;
    background-color: #ffffff;
    text-align: center;
    border-spacing: 0;
    font-size: 14px;
    font-weight: normal;
    padding-left: 10%;
  }

  .thead {
    position: relative;
    z-index: 1;
    color: #7e8081;
  }

  .thead .table_cell:first-child {
    border-left-width: 0;
  }

  .thead .table_cell {
    line-height: 50px;
    border-bottom: none;
    font-weight: normal;
    text-align: center;
  }

  .tbody .table_cell {
    height: 35px;
    border-top: none;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: normal;
    color: #353535;
    text-align: center;
  }
</style>
